<html>

	<head>
		<script type="text/javascript" src="js/com.unknown.Constants.js" ></script>
		<script type="text/javascript" src="js/Rectangle.js" ></script>
		<script type="text/javascript" src="js/Matrix2d.js" ></script>
		<script type="text/javascript" src="js/Vector2.js" ></script>
		<script type="text/javascript" src="js/Quad.js" ></script>
		<script type="text/javascript" src="plugin/jquery/jquery-1.5.2.min.js" ></script>
		<script type="text/javascript" src="js/com.unknown.GameWindow.js" ></script>
	</head>
	
	<body>
		<div id="imageBucket">
			<img id="playerWalk" src="images/characters/thin_player_Walk.png" />
		</div>
		<canvas id="canvas" />
		
		
		<script type="text/javascript">
			canvas.width = 1000;
			canvas.height = 1000;
			var gameWindow = null;
			try{
				gameWindow = new com.unknown.GameWindow(canvas, imageBucket, null);
			}catch( ex ) {}
			gameWindow.start();
			var DEGREES_TO_RADIANS = Math.PI / 180.0;
			
			Bone = Node.extend({
				length : 100,
				_start  : null,
				_end    : null,
				init : function(bone){
					this.active = 0;
					var rect = Quad.rectangle({x:0, y:0}, 5, 100);
					var meshData = rect.meshData();
										
					this._start = new Node(rect.north().extrude({x:5, y:5}));
					this._end   = new Node(rect.south().extrude({x:-5,y:-5}));
					
					this._super(rect);
					this.addChild( this._start );
					this.addChild( this._end );
				}				
			}, 'Bone');
			MouseDraw = function(){
				this.history = [];
				this.down = false;
				this.start = {x:0, y:0};
				this.active = 0;
				this.activeNode = null;
			};
			MouseDraw.prototype = {
				render : function(gw){
					var c = gw.c;
					var remove = [];
					var history = this.history;
					history.forEach(function(item, index){
						c.beginPath();
						c.strokeStyle = "cyan";
						c.lineWidth = 6;
						c.arc(item.x, item.y, item.size, 0, Math.PI*2, true);
						c.stroke();
						
						item.size--;
						if( item.size == 0 ){
							remove.push( index );
						}
					});
					remove.forEach(function(item){
						history.shift();
					});
				},
				hit : function(x, y){
					this.history.push({x:x, y:y, size:30});
				},
				intersects : function(){ return false; }
				,setActive : function(value){}
			};
			
			gameWindow.entities["1"] = new Bone();
			//var xx = new Bone();
			//var yy = new Bone(xx);
			
			//gameWindow.entities["2"] = xx;
			//gameWindow.entities["yy"] = yy;
			
			var b = new Bone();
			b.translate(100, 100);
			b.rotate(45 || 0);
			b.scale(2, 2);
			var n = new Node(b);
			gameWindow.entities["4"] = n;
			var tmpm = b.matrix2d.invert();
			//gameWindow.entities["4"].setTransform(tmpm);
			//gameWindow.entities["4"] = new Triangle(new Vector2(100,0), new Vector2(100,100), new Vector2(50, 100));
			
			var md = new MouseDraw();
			gameWindow.entities["3"] = md;
			
			document.addEventListener("mousedown", function(e){
				console.log(e.offsetX + ", " + e.offsetY);
				md.down = true;
				md.start.x = e.offsetX;
				md.start.y = e.offsetY;
				md.hit(e.offsetX, e.offsetY);
				for(var member in gameWindow.entities){
					try{
						var entity = gameWindow.entities[member];
						var intersection = entity.intersects({x:e.offsetX, y:e.offsetY});
						if( entity && intersection ){
							entity = intersection.pop();
							while( !(entity.child instanceof Mesh) ){
							//while(entity.child){
								entity = entity.child;
							}
							entity.node.setActive(true);
							entity.node.save();
							md.activeNode = entity;
							break;
						}
					}catch(ex){
						console.log(ex);
					}
				}
				e.preventDefault();
			}, true);
			document.addEventListener("mousemove", function(e){
				if(md.down){
					md.hit(e.offsetX, e.offsetY);
				}
				if( md.activeNode ){
					var entity = md.activeNode;
					var node = entity.node;
					var mesh = entity.child;
					node.restore();
					node.save();
					var offset = {x:e.offsetX - md.start.x,y:e.offsetY - md.start.y}
					offset.x = offset.x / node.getWorldTransform().x1;
					offset.y = offset.y / node.getWorldTransform().y2;
					//node.getWorldTransform().invert().apply(offset, offset);
					node.translate(offset.x, offset.y);
					
					//mesh.translate(offset.x, offset.y);
				}
			}, true);
			document.addEventListener("mouseup", function(e){
				md.down = false;
				for(var member in gameWindow.entities){
					try{
						var entity = gameWindow.entities[member];
						entity.setActive(false);
						md.activeNode = null;
					}catch(ex){
						console.log(ex);
					}
				}
			}, true);
			
		</script>
		
	</body>
</html>